<template>
	<view>
		<image class="goBack" @click="goBack" src="https://cdn.yic3.cn/lawyer/mp-xhs/mine/close.png" mode=""></image>
		<image class="topBg" src="https://cdn.yic3.cn/lawyer/mp-xhs/mine/loginBg.png" mode="widthFix"></image>
		<view class="loginBox">
			<p>手机验证码登录</p>
			<p>快速登录，获取专属AI法律助理</p>
			<view class="inputBox">
				<view>
					<input v-model="formData.phone" maxlength="11" type="number" placeholder-style="color:#bbb"
						placeholder="请输入手机号" />
					<image v-if="formData.phone" src="http://cdn.yic3.cn/lawyer/byteDance/login/%E5%8F%89@2x.png"
						mode=""></image>
				</view>
				<view>
					<input v-model="formData.code" type="text" placeholder-style="color:#bbb" placeholder="请输入验证码" />
					<span class="timer" v-if="getCodeType">{{second}}s</span>
					<span class="timer" v-else @click="getCode">获取验证码</span>
				</view>
			</view>
			<view class="loginBtn" :class="!loginStatus && 'opac'" @click="goLogin">
				登录
			</view>
			<label class="roiPhone" style="display: flex;align-items: center;" @click="xuanze">
				<view class="check" :class="formData.roi?'choiceSty':''">
				</view>
				<view class="checkText">我已阅读并同意
					<text class="col-g" @click.stop="goHtml($store.state.agreementList.user)">《用户协议》</text>和
					<text class="col-g" @click.stop="goHtml($store.state.agreementList.provacy)">《隐私协议》</text>
				</view>
			</label>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				getCodeType: false,
				second: 60,
				formData: {
					phone: '',
					code: '',
					roi: false,
				},
				loginStatus: false,

			}
		},
		watch: {
			formData: {
				handler(newVal, oldVal) {
					if (uni.$u.test.mobile(newVal.phone) && newVal.code && newVal.roi) {
						this.loginStatus = true
					} else {
						this.loginStatus = false
					}
				},
				deep: true
			}
		},
		methods: {
			getCode() {
				if (!uni.$u.test.mobile(this.formData.phone)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (this.getCodeType) return false
				uni.showLoading({
					title: '正在获取验证码',
				})
				this.$api.smsSend({
					phone: this.formData.phone
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 0) {
						this.getCodeType = true
						uni.$u.toast('验证码已发送');
						let timer = setInterval(() => {
							if (this.second >= 0) {
								this.second--
							} else {
								this.getCodeType = false
								this.second = 60
								clearInterval(timer)
							}
						}, 1000)
					} else if (res.data.code == 1015) {
						uni.$u.toast('短信发送超出限制');
					}
				})

			},
			// 登录
			goLogin() {
				if (!this.loginStatus) return
				// #ifdef APP || APP-PLUS
				this.$api.phonelogin({
					"loginType": "phone",
					"phone": {
						phone: this.formData.phone,
						code: this.formData.code
					},
				}).then(res => {
					if (res.data.code == 0) {
						this.$store.commit('updateUserInfo', res.data.data.userInfo)
						uni.setStorageSync('Token', res.data.data.token)
						uni.reLaunch({
							url: '/pages/index/mine/mine'
						})
					}
					if (res.data.code == 1006) {
						uni.showToast({
							icon: 'error',
							title: '验证码错误',
							duration: 2000
						});
					}
				})
				// #endif
				// #ifdef MP
				this.$api.bindPhone({
					phone: this.formData.phone,
					code: this.formData.code
				}).then(res => {
					if (res.data.code == 0) {
						uni.reLaunch({
							url: '/pages/index/mine/mine'
						})
					}
					if (res.data.code == 1006) {
						uni.showToast({
							icon: 'error',
							title: '验证码错误',
							duration: 2000
						});
					}
				})
				// #endif

			},
			xuanze() {
				this.formData.roi = !this.formData.roi
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'login.scss'
</style>